<template>
  <div class="searchlist">
    <van-nav-bar
      left-arrow
      name="cross"
      title="搜索结果"
      @click-left="$router.back()"
    >
    </van-nav-bar>
    <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getlist"
      >
        <!-- //初始化后  会立刻执行一次  getArtList   cate_id   '' -->

        <!-- loading 是否转圈  是否正在加载中 -->
        <div class="page-article-list">
          <li v-for="(item, index) in list" :key="item._id">
            <div class="box1">
              <p>{{ item.title }}</p>
              <div
                :class="{
                  hide: item.poster_type == 1,
                  rightImg: item.poster_type == 2,
                  articleImg: item.poster_type == 3,
                }"
              >
                <img v-for="img in item.imageSrc" :src="img" />
              </div>
              <div class="comments">
                <span>{{ item.author }}</span>
                <span>2评论</span>
                <span>2021-04-22</span>
              </div>
            </div>
          </li>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { List, PullRefresh } from "vant"; //上拉加载 下拉刷新
import { search } from "@/api/api";

export default {
  name: "searchlist",
  data() {
    return {
      loading: false,
      finished: false, //是否 全部 加载完毕了
      skip: 0,
      limit: 20,
      isRefresh: false, //是否正在刷新
      list: [],
      key_word: [],
    };
  },
  components: {
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
  },
  created() {
    this.key_word = this.$route.query.key_word;
  },
  methods: {
    getlist(flag) {
      let { key_word, skip, limit } = this;
      search({
        key_word,
        skip,
        limit,
      }).then((res) => {
        console.log(res);

        if (res.code == 0) {
          if (flag) {
            this.list = res.data;
            this.isRefresh = false;
          } else {
            this.list.push(...res.data);
          }

          let len = this.list.length;
          if (len >= res.count) {
            this.finished = true;
          } else {
            this.loding = false;
            this.skip = len;
          }
        }
      });
    },
    onRefresh() {
      this.skip = 0;
      (this.finished = false), this.getlist(true);
    },
  },
};
</script>
<style lang="less">
.searchlist {
  * {
    margin: 0;
    padding: 0;
  }
  background-color: @color3;
  height: 100vh;
  li {
    padding: 0.86667vw 2.86667vw;
  }
  .box1 {
    border: 1px solid #c6c4c4;
  }
  p,
  .comments {
    padding: 10px;
  }
  .rightImg,
  .articleImg {
    // width: 100%;
    text-align: center;
  }
  img {
    width: 83.66667vw;
    height: 82vw;
  }
}
</style>